<script setup lang="ts">
import { bindBarcodeApi, getBarcodeAndScanPageAPI, getBarcodeDetailAPI } from '@/api/code'
import type { KpcodeBarcodeScanEntity } from '@/types/code'
import { useMemberStore } from '@/stores'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDeliveryNoAPI } from '@/api/account'
import { getSearchBusUserListAPI } from '@/api/business'
import type { ApplyBusiness } from '@/types/business'
import { bindCCTToNode } from 'XrFrame/kanata/lib/frontend'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const memberStore = useMemberStore()

// 搜索列表显示隐藏
const searchActive = ref(false)

// 搜索
const searchValue = ref('')
const companyList = ref<ApplyBusiness[]>([])
const search = async () => {
  const res = await getSearchBusUserListAPI({name:searchValue.value})
  if (res.data.length > 0) {
    companyList.value = res.data
    searchActive.value = true
  } else {
    uni.showToast({
      title: '没有搜索到结果，请重新尝试',
      icon: 'none',
    })
  }
}

// 取消搜索
const cancel = () => {
  companyList.value = []
}

// 清楚搜索文字
const clear = () => {
  searchValue.value = ''
  companyList.value = []
}

// 添加公司
let companyName = ref('')
const addCompany = (name: string) => {
  companyName.value = name
}

const scanList = ref<Array<string>>([])

// 扫码获取信息
const openScanner = async () => {
  // 调用uni.scanCode()函数进行扫一扫操作
  uni.scanCode({
    success(res: UniApp.ScanCodeSuccessRes) {
      let code = res.result.split(',')[0]
      let obj = {
        codeNo: code,
        deliveryId: memberStore.profile.userId,
        deliveryName: memberStore.profile.name,
        deliveryPhone: memberStore.profile.phone,
        acsType: '2',
      }
      if (code.includes('BA')) {
        obj.acsType = '1'
      }
      bindCode(obj)
    },
  })
}

const bindCode = async (obj: object) => {
  const res = await bindBarcodeApi(obj)
  uni.showToast({ icon: 'none', title: res.msg })
}

onLoad(() => {

})
</script>

<template>
  <!-- 搜索得到的人员列表 -->
  <view class="search_list">
    <!-- 搜索框 -->
    <uni-search-bar
      @confirm="search"
      :focus="true"
      v-model="searchValue"
      @cancel="cancel"
      @clear="clear"
    >
    </uni-search-bar>
    <view v-if="companyList.length > 0">
      <view class="sear_item" v-for="item in companyList" :key="item.name">
        <view class="left">
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="btn_group">
          <button
            size="mini"
            style="color: #fff; background-color: #18bc37"
            @tap="addCompany(item.name!)"
          >
            <uni-icons type="plus" size="14" color="#fff"></uni-icons> 选择
          </button>
        </view>
      </view>
    </view>
    <view v-else class="no_list">请输入商家名称搜索,选择商家后绑码</view>
  </view>

  <view class="list" v-if="companyName">
    <view class="title">绑码公司：{{ companyName }}</view>
  </view>
  <view class="scan" v-if="companyName"
    ><image
      @tap="openScanner"
      class="scan_image"
      src="@/static/images/cv-sys.png"
      mode="aspectFill"
  /></view>
</template>
<style lang="scss">
.no_list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  font-size: 14px;
  color: #999;
}
.search_list {
  padding: 15px;
  .sear_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    .left {
      flex: 1;
      font-size: 26rpx;
      line-height: 40rpx;
      display: flex;
      align-items: center;
      .name {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
      }
      .phone {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: inherit;
      }
    }
    .btn_group {
      button {
        margin-left: 5px;
        padding: 0 5px;
        font-size: 24rpx;
      }
    }
  }
}
.scan_list {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;
  .scan_item {
    margin: 10rpx;
    color: #27ba9b;
  }
  .noscanitem {
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #999;
    width: 100%;
  }
}
.form-button {
  width: 100%;
}
.list .title {
  display: flex;
  justify-content: space-between;
  padding-right: 5px;
  align-items: center;
  padding-left: 15px;
  height: 40px;
  background-color: #27ba9b;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
</style>
